<!-- 我的统计 -->

<template>
  <div class="MyStatistic">
    <div>
      <div>进出统计</div>
      <LineChart id="Door-Statistic-inOut" :axis-list="inOutX" :data-list="inOutData" />
    </div>

    <div>
      <div>通行统计</div>
      <PieChart
        id="Door-Statistic-type"
        :radius="['50%', '70%']"
        :data-list="typeList"
        :colorList="['#56F6FF', '#FFE671', '#FF594D']"
      />
    </div>

    <div>
      <div>通行TOP5</div>
      <BarChart id="Door-Statistic-top" :axis-list="topX" :data-list="topData" />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyStatistic',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixInfo(), CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 进出统计 X 轴坐标
     */
    inOutX() {
      const { inOut = [] } = this.info
      return inOut.map((item) => item[0])
    },

    /**
     * 进出统计数据
     */
    inOutData() {
      const { inOut = [] } = this.info
      const data = inOut.map((item) => item[1])
      return [{
        color: '#ff594d',
        data,
        showSymbol: false,
        smooth: true,
      }]
    },

    /**
     * 通行类型列表
     */
    typeList() {
      const { info, DICT } = this

      return DICT.ACCESS_TYPE.map((dict) => {
        const matched = info.type.find(item => item[0] === `${dict[0]}`) || []
        const value = (matched[1] || '').slice(0, -1)
        return { name: dict[1], value: value }
      })
    },

    /**
     * TOP5 X 轴坐标
     */
    topX() {
      const { info } = this
      return info.top.map((item) => item[0])
    },

    /**
     * TOP5 数据
     */
    topData() {
      const { info } = this
      const data = info.top.map((item) => item[1])
      return [{
        barWidth: 10,
        color: '#ff594d',
        data,
        type: 'bar',
      }]
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
